import React, {memo, useEffect,useState} from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { Table, Tag, Space, Divider, Modal, Spin,Button,message,Upload} from 'antd';
import {UploadOutlined} from '@ant-design/icons';
import { postStudentInfoAction } from '../../store/studentsInfoStore/actionCreators';

//自定义函数


export default memo(function UploadStudentInfo() {
    const [fileList, setFileList] = useState([]);
    const [uploading, setUploading] = useState(false);
    const handleUpload = () => {
      const formData = new FormData();
      fileList.forEach((file) => {
        formData.append('files[]', file);
      });
      setUploading(true);
      // You can use any AJAX library you like
      console.log('fileList',fileList);
      console.log('formData',formData);
      fetch('http://127.0.0.1:8000/api/uoloadStudentInfo', {
        method: 'POST',
        body: formData,
      })
        .then((res) => {
          var results = res.json()
          // console.log(results);
        })
        .then(() => {
          setFileList([]);
          message.success('学生信息导入成功！');
        })
        .catch(() => {
          message.error('学生信息导入失败!');
        })
        .finally(() => {
          setUploading(false);
        });
    };
    const props = {
      onRemove: (file) => {
        const index = fileList.indexOf(file);
        const newFileList = fileList.slice();
        newFileList.splice(index, 1);
        setFileList(newFileList);
      },
      beforeUpload: (file) => {
        setFileList([...fileList, file]);
        return false;
      },
      fileList,
    };
  

    
    return (
        <div>
            <Divider orientation="left">导入学生信息</Divider>
            <div style={{
                marginLeft:'100px',
                marginTop: '50px'

            }}>
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}
                            style={{
                                width:'300px'
                            }}
                        >
                        选择文件
                    </Button>
                </Upload>
                <Button
                    type="primary"
                    onClick={handleUpload}
                    disabled={fileList.length === 0}
                    loading={uploading}
                    style={{
                    marginTop: 16,
                    marginLeft: 100
                    }}
                >
                {uploading ? '上传中' : '开始上传'}
                </Button>
            </div>
        </div>
    )
})